<template>
  <a-layout class="my-layout">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsed  :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 ,zIndex:20}">
      <div class="logo" ></div>
      <left-menu :menuCollapsed="collapsed"></left-menu>
    </a-layout-sider>
    <a-layout :style="{   marginLeft: collapsed?'80px':'200px' ,height:'100%'}">
      <a-layout-header style="background: #fff; padding: 0 ;display: flex; justify-content: space-between;" >
        <div class="my-layout-header-left">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
        </div>
        <div class="my-layout-header-right">
          <a-space>
            <div>
              {{ this.$store.state.userRole.roles }}
            </div>
            <a-avatar
              shape="square"
              size="large"
              :style="{ verticalAlign: 'middle' }"
            >
              {{ this.$store.state.userInfo.adminName }}
            </a-avatar>


            <a-button type="primary" @click="logout">退出</a-button>
          </a-space>

        </div>
      </a-layout-header>
      <a-layout-content >
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="textAlign: center">
        Ant Design ©2020 Created by HuangShen
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>

import LeftMenu from '@/components/LeftMenu'

export default {
  components: { LeftMenu },
  data() {
    return {
      collapsed: false//是否收起导航栏
    }
  },
  created() {
    this.getUserId()
    this.getUserInfo()
  },
  methods: {
    /**
     * 获取用户信息
     */
    getUserId() {
      if (this.$store.state.userRole.adminId === null) {
        const token = localStorage.getItem('Access-Token')
        if (token === null) return
        const user = token.split('.')[1]
        const Base64 = require('js-base64').Base64
        const userRole = Base64.decode(user)

        this.$store.commit('setUserRole', JSON.parse(userRole))
      }
    },
    /**
     * 退出登录
     */
    logout() {
      localStorage.removeItem('Access-Token')
      this.$router.push('/user/login')
    },
    getUserInfo() {
      const token = localStorage.getItem('Access-Token')
      const user = token.split('.')[1]
      const Base64 = require('js-base64').Base64
      const userRole = Base64.decode(user)
      const userId=JSON.parse(userRole).adminId
      this.$axios({
        method: 'get',
        url: '/admin/getOne?adminId='+userId
      }).then(res => {
        if (res.data.code === "200") {
          this.$store.commit('setUserInfo', res.data.data)
        } else if (res.data.code===-1){
          this.logout()
          this.$notification.error({
            message: '权限不足',
            description:
              '请练联系管理员后重新登录'
          })
        }else {

            this.logout()
            this.$notification.error({
              message: '令牌过期',
              description:
                '请重新登录'
            })

        }

      })
    }
  }
}
</script>
<style scoped>



#my-layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#my-layout .trigger:hover {
  color: #1890ff;
}
.my-layout .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.my-layout-header-left {
  padding-left: 20px;
}
.my-layout-header-right {
  padding-right: 20px;
}
</style>
